/**
 * Time：2022年5月29日 15:53:48
 * echarts 小案例
 */


//ECharts 摇号趋势图
var myChart = echarts.init(document.getElementById('yh_trend'));
var optionYhTrend = {
    color: ['#fed0c1', '#9dffff'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    // 图例
    legend: {
        data: [{ icon: 'circle', name: '摇号人数' }, { icon: 'circle', name: '预约人数' }],
        textStyle: {
            //颜色 
            color: '#fff',
            // 图例间隔
        },
        itemGap: 80,
        // 相对定位
        right: 50
    },
    grid: {
        left: '1%',
        right: '3%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: true,
            data: [
                '二月',
                '三月',
                '四月',
                '五月',
                '六月',
                '七月',
                '八月',
                '九月',
                '十月',
                '十一月',
                '十二月'
            ],
            //x坐标轴
            axisLine: {
                show: false
            },
            //x坐标轴Label
            axisLabel: {
                color: '#fff',
                fontWeight: '700',
                // 取消间接隐藏
                interval: 0,
            },
            //x坐标轴刻度
            axisTick: {
                show: false
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            boundaryGap: true,
            // 去除横线
            splitLine: {
                show: false
            },
            // 刻度标[要在min和max之前]
            interval: 400,
            min: 0,
            max: 2000,
            axisLabel: {
                // y坐标轴颜色
                color: '#fff',
                // 标识格式化
                formatter: function (value, index) {
                    if (value > 1000) {
                        return value / 1000 + 'k';
                    }
                    return value;
                }
            }
        }
    ],
    series: [
        {
            name: '摇号人数',
            type: 'line',
            // stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#fed0c1'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [0, 800, 500, 1100, 420, 1620, 920, 1300, 820, 1000, 0]
        },
        {
            name: '预约人数',
            type: 'line',
            // stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 1,
                color: '#fff'
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#9dffff'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [0, 500, 350, 1100, 400, 1392, 530, 1100, 820, 1000, 0]
        },
    ]
};
myChart.setOption(optionYhTrend);


//ECharts 知识库数量统计
var myChart = echarts.init(document.getElementById('zs_sum'));
var optionZsSum = {
    // 颜色
    color: ['#ffb703', '#f67860', '#61f1e5'],
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        y: 'center',
        left: 360,
        icon: 'circle',
        textStyle: {
            //颜色 
            color: '#fff',
            // 图例间隔
        },
    },
    series: [
        {
            name: '知识库数量',
            type: 'pie',
            radius: '80%',
            data: [
                { value: 70, name: '视频' },
                { value: 18, name: '文档' },
                { value: 12, name: '语言' }
            ],
            // 样式
            itemStyle: {
                normal: {
                    // label
                    label: {
                        show: true,
                        //inside 内部显示
                        position: 'inside',
                        // 格式化
                        formatter: '{d}%',
                        // 颜色
                        color: '#fff',
                        // 字体大小
                        fontSize: 16 //字体大小
                    }
                }
            }
        }
    ]
};
myChart.setOption(optionZsSum);



//ECharts 热门知识库类型
var myChart = echarts.init(document.getElementById('zs_type'));
optionZsType = {
    xAxis: {
        type: 'category',
        boundaryGap: true,
        data: ['流感', '感冒', '发烧', '过敏', '脑炎', '中暑', '传染病'],
        //x坐标轴
        axisLine: {
            show: false
        },
        //x坐标轴刻度
        axisTick: {
            show: false
        }
    },
    axisLine: {
        show: false
    },
    axisLabel: {
        color: '#fff',
        fontWeight: '700',
    },
    yAxis: {
        type: 'value',
        // 去除横线
        splitLine: {
            show: false
        },
        interval: 20,
        min: 0,
        max: 100
    },
    grid: {
        // 介入高度
        height: 150,
        left: '5%',
        right: '5%',
        bottom: '10%',
        containLabel: true
    },
    series: [
        {
            data: [75, 56, 50, 74, 63, 81, 82],
            type: 'bar',
            color: '#04bcfe'
        }
    ]
};
myChart.setOption(optionZsType);


//ECharts 投诉举报
var myChart = echarts.init(document.getElementById('ts_report'));
var optionTsReport = {
    color: ['#294e94', '#ce9178'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',

        }
    },
    legend: {
        data: [
            { icon: 'circle', name: '意见' },
            { icon: 'circle', name: '举报' }
        ],
        textStyle: {
            //颜色 
            color: '#fff',
            // 图例间隔
        },
        itemGap: 100,
        // 相对定位
        right: 70
    },

    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: [
                '五月',
                '六月',
                '七月',
                '八月',
                '九月',
                '十月',
                '十一月',
                '十二月'
            ],
            //x坐标轴
            axisLine: {
                show: false
            },
            //x坐标轴Label
            axisLabel: {
                color: '#fff',
                fontWeight: '700',
                // 取消间接隐藏
                interval: 0
            },
            //x坐标轴刻度
            axisTick: {
                show: false
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            boundaryGap: true,
            // 去除横线
            splitLine: {
                show: false
            },
            // 刻度标[要在min和max之前]
            interval: 10,
            min: 0,
            max: 60,
            axisLabel: {
                // y坐标轴颜色
                color: '#fff'
            }
        }
    ],
    series: [
        {
            name: '意见',
            type: 'line',
            // 圆滑
            smooth: true,
            // 背景样式
            areaStyle: {
                color: 'rgb(4, 53, 116,.3)',
                origin: 'start'
            },
            emphasis: {
                focus: 'series'
            },
            // 背景样式
            data: [50, 42, 59, 39, 43, 38, 48, 38]
        },
        {
            name: '举报',
            type: 'line',
            // 圆滑
            smooth: true,
            areaStyle: {
                color: 'rgba(206, 145, 120,.3)'
            },
            emphasis: {
                focus: 'series'
            },
            data: [0, 19, 16, 22, 20, 31, 25, 35]
        }
    ]
};
myChart.setOption(optionTsReport);



//ECharts 地区业务总量
var myChart = echarts.init(document.getElementById('yw_sum'));

var optionYwSum = {
    // 颜色
    color: ['#4cf0a7', '#44e0e9', '#e164b5', '#f59932'],
    tooltip: {
        trigger: 'item'
    },
    legend: {
        // 不显示图例
        show: false
    },
    series: [
        {
            name: '地区业务总量',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '20',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: true
            },
            // 样式
            itemStyle: {
                normal: {
                    // label
                    label: {
                        show: true,
                        // 颜色
                        color: '#fff',
                        // 格式化
                        formatter: '{b}\n{c}',
                        // 字体大小
                        fontSize: 12 //字体大小
                    }
                }
            },
            data: [
                { value: 0.61, name: '省人民医院' },
                { value: 0.17, name: '省中医院' },
                { value: 0.15, name: '市二院' },
                { value: 0.07, name: '省二院' }
            ]
        }
    ]
};

myChart.setOption(optionYwSum);


var myChart = echarts.init(document.getElementById('line_info'));

var optionLineInfo = {
    color: ['#01ffd7', '#b7e2fe', '#9a78fc'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: [
            { icon: 'circle', name: '咨询数' },
            { icon: 'circle', name: '回复数' },
            { icon: 'circle', name: '未回复数' }
        ],
        textStyle: {
            //颜色 
            color: '#fff',
        },
        // 图例间隔
        itemGap: 80,
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        show: false,
        min: 0,
        max: 100
    },
    yAxis: {
        type: 'category',
        data: ['2017年十月', '2017年十一月', '2017年十二月'],
        axisLine: {
            show: true,
            lineStyle: {
                // 控制线条样式
                color: '#fff'
            }
        },
        axisLabel: {
            color: '#fff',
            fontWeight: '700',
            // 取消间接隐藏
            interval: 0
        },
        //y坐标轴刻度
        axisTick: {
            show: false
        }
    },
    series: [
        {
            name: '咨询数',
            type: 'bar',
            stack: 'total',
            label: {
                // 隐藏label
                show: false
            },
            emphasis: {
                focus: 'series'
            },
            data: [50, 50, 50]
        },
        {
            name: '回复数',
            type: 'bar',
            stack: 'total',
            label: {
                // 隐藏label
                show: false
            },
            emphasis: {
                focus: 'series'
            },
            data: [10, 40, 30]
        },
        {
            name: '未回复数',
            type: 'bar',
            stack: 'total',
            label: {
                // 隐藏label
                show: false
            },
            emphasis: {
                focus: 'series'
            },
            data: [50, 10, 40]
        }
    ]
};
myChart.setOption(optionLineInfo);


//格式化当前时间
function formatDate(time) {
    let date = new Date(time);
    let year = date.getFullYear(),
        month = date.getMonth() + 1,//月份0开始
        day = date.getDate(),
        hour = date.getHours(),
        min = date.getMinutes(),
        sec = date.getSeconds();
    let newTime = year + '-' +
        (month < 10 ? '0' + month : month) + '-' +
        (day < 10 ? '0' + day : day) + ' ' +
        (hour < 10 ? '0' + hour : hour) + ':' +
        (min < 10 ? '0' + min : min) + ':' +
        (sec < 10 ? '0' + sec : sec);
    return newTime;
}

// 初始化
$(document).ready(function () {
    //显示时间[每秒刷新一次]
    setInterval(() => {
        $('.time').text(formatDate(new Date))
    }, 1000);

});





